<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打卡系统管理</title>
    <style>
        .header-logo {
            line-height: 70px;
            font-size: 30px;
            font-weight: 800;
            color: #c9302c;
            margin-left: 300px;
        }

        .header-btn {
            float: right;
            margin-right: 200px;
            margin-top: 15px;
        }
        .max-height{
            max-height: 500px;
            overflow-y: auto;
        }
    </style>
</head>

<body>
<div>
    <div class="header-logo">
        <span>打卡系统管理</span>
        <button type="button" class="btn btn-danger waves-effect header-btn waves-light">
            <a style="color: white" href="/admin/logout">退出</a>
        </button>
    </div>
</div>

<div>
    <div class="row">
        <div class="col-3">
            <!-- Tab navs -->
            <div class="nav flex-column nav-tabs text-center" id="v-tabs-tab" role="tablist"
                 aria-orientation="vertical">
                <a class="nav-link active" id="v-tabs-home-tab" data-toggle="tab" href="#v-tabs-home" role="tab"
                   aria-controls="v-tabs-home" aria-selected="true">员工信息</a>
                <a class="nav-link" id="v-tabs-profile-tab" data-toggle="tab" href="#v-tabs-profile" role="tab"
                   aria-controls="v-tabs-profile" aria-selected="false">员工打卡记录</a>
                <a class="nav-link" id="v-tabs-messages-tab" data-toggle="tab" href="#v-tabs-messages" role="tab"
                   aria-controls="v-tabs-messages" aria-selected="false">员工打卡设备管理</a>
                <a class="nav-link" id="v-tabs-monitor-tab" data-toggle="tab" href="#v-tabs-monitor" role="tab"
                   aria-controls="v-tabs-monitor" aria-selected="false">卡机管理</a>
                <a class="nav-link" id="v-tabs-clockin-tab" data-toggle="tab" href="#v-tabs-clockin" role="tab"
                   aria-controls="v-tabs-clockin" aria-selected="false">打卡时间设置</a>
            </div>
            <!-- Tab navs -->
        </div>

        <div class="col-9">
            <!-- Tab content -->
            <div class="tab-content" id="v-tabs-tabContent">
                <div class="tab-pane fade show active max-height" id="v-tabs-home" role="tabpanel"
                     aria-labelledby="v-tabs-home-tab">
                    <!--员工信息-->
                    <table class="table">
                        <thead style="font-size: 24px">
                        <tr>
                            <th scope="col">工号</th>
                            <th scope="col">姓名</th>
                            <th scope="col">密码</th>
                            <th scope="col">部门</th>
                            <th scope="col">职位</th>
                            <th scope="col">操作</th>
                            <th scope="col">
                                <button type="button" class="btn btn-outline-dark" data-ripple-color="dark"
                                        class="btn btn-primary"
                                        data-toggle="modal"
                                        data-target="#addUserModal">添加</button>
                            </th>
                        </tr>
                        </thead>
                        <tbody id="all_user">
                        <tr v-for="user in collection">
                            <th scope="row">{{user.id}}</th>
                            <td>{{user.name}}</td>
                            <td>{{user.password}}</td>
                            <td>{{user.section}}</td>
                            <td>{{user.post}}</td>
                            <td>
                                <select class="select">
                                    <option value="1">正常</option>
                                    <option value="1">冻结</option>
                                    <option value="1">删除</option>
                                </select>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="v-tabs-profile" role="tabpanel" aria-labelledby="v-tabs-profile-tab">
                    <!--员工打卡记录-->
                    <table class="table">
                        <thead style="font-size: 24px">
                        <tr>
                            <th scope="col">工号</th>
                            <th scope="col">姓名</th>
                            <th scope="col">上下班</th>
                            <th scope="col">打卡时间</th>
                            <th scope="col">打卡方式</th>
                            <th scope="col">是否迟到</th>
                        </tr>
                        </thead>
                        <tbody id="user_attendances">
                        <tr v-for="attendance in collection">
                            <th scope="row">{{attendance.userId}}</th>
                            <td>{{attendance.name}}</td>
                            <td>{{attendance.swipeType}}</td>
                            <td>{{attendance.formatted}}</td>
                            <td>{{attendance.swipeDevice}}</td>
                            <td>{{attendance.negative}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="v-tabs-messages" role="tabpanel" aria-labelledby="v-tabs-messages-tab">
                    <!--员工打卡设备管理-->
                    <table class="table">
                        <thead style="font-size: 24px">
                        <tr>
                            <th scope="col">工号</th>
                            <!--                            <th scope="col">姓名</th>-->
                            <th scope="col">设备ID</th>
                            <th colspan="3">操作</th>
                            <th scope="col">
                                <button type="button" class="btn btn-outline-dark" data-ripple-color="dark">添加</button>
                            </th>
                        </tr>
                        </thead>
                        <tbody id="user_devices">
                        <tr v-for="userdevice in collection">
                            <th scope="row">{{userdevice.userId}}</th>
                            <!--                                <td>{{userdevice.name}}</td>-->
                            <td>{{userdevice.deviceId}}</td>
                            <td>
                                <select class="select">
                                    <option value="1">正常</option>
                                    <option value="1">停用</option>
                                    <option value="1">删除</option>
                                </select>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="v-tabs-monitor" role="tabpanel" aria-labelledby="v-tabs-messages-tab">
                    <!--卡机管理-->
                    <table class="table">
                        <thead style="font-size: 24px">
                        <tr>
                            <th scope="col">设备ID</th>
                            <th scope="col">设备名</th>
                            <th scope="col">蓝牙地址</th>
                            <th scope="col">登录密码</th>
                            <th scope="col">设备状态</th>
                            <th scope="col">
                                <button type="button" class="btn btn-outline-dark" data-ripple-color="dark" >添加</button>
                            </th>
                        </tr>
                        </thead>
                        <tbody id="monitors">
                        <tr v-for="monitor in collection">
                            <th scope="row">{{monitor.deviceId}}</th>
                            <td>{{monitor.deviceName}}</td>
                            <td>{{monitor.bluetoothMAC}}</td>
                            <td>{{monitor.password}}</td>
                            <td>
                                <select class="select">
                                    <option value="1">正常</option>
                                    <option value="1">停用</option>
                                    <option value="1">删除</option>
                                </select>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="v-tabs-clockin" role="tabpanel" aria-labelledby="v-tabs-messages-tab">
                    <!--打卡时间设置-->
                    <div class="container-fluid">
                        <div class="row">
                            <!-- Grid column -->
                            <div class="col-md-6 col-lg-5 ml-auto">
                                <div class="card px-5 py-3 mt-5 mx-2">
                                    <div class="md-form">
                                        <input placeholder="Selected time" type="text"
                                               id="start_work"
                                               class="form-control timepicker picker">
                                        <label for="start_work" class="active">上班时间</label>
                                    </div>
                                </div>
                            </div>
                            <!-- Grid column -->
                            <!-- Grid column -->
                            <div class="col-md-6 col-lg-5 mr-auto">
                                <div class="card px-5 py-3 mt-5 mx-2">
                                    <div class="md-form">
                                        <input placeholder="Selected time" type="text" id="end_work"
                                               class="form-control timepicker picker">
                                        <label for="end_work" class="active">下班时间</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <!-- Grid column -->
                            <div class="col-md-6 col-lg-5 ml-auto">
                                <div class="card px-5 py-3 mt-5 mx-2">
                                    <div class="md-form">
                                        <input placeholder="Selected time" type="text"
                                               id="start_clockin"
                                               class="form-control timepicker picker">
                                        <label for="start_clockin" class="active">上班打卡时间</label>
                                    </div>
                                </div>
                            </div>
                            <!-- Grid column -->
                            <!-- Grid column -->
                            <div class="col-md-6 col-lg-5 mr-auto">
                                <div class="card px-5 py-3 mt-5 mx-2">
                                    <div class="md-form">
                                        <input placeholder="Selected time" type="text"
                                               id="latest_clockin"
                                               class="form-control timepicker picker">
                                        <label for="latest_clockin" class="active">下班打卡时间</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Tab content -->
    </div>
</div>



<!-- 添加员工Modal -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">添加员工</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <span class="input-group-text" >工号：</span>
                    <input type="text" class="form-control" placeholder="" aria-label="Username"
                            aria-describedby="basic-addon1" v-model="id"/>
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text">姓名：</span>
                    <input type="text" class="form-control" placeholder="" aria-label="Username"
                           aria-describedby="basic-addon1" v-model="name"/>
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text">密码：</span>
                    <input type="text" class="form-control" placeholder="" aria-label="Username"
                           aria-describedby="basic-addon1" v-model="password"/>
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text">部门：</span>
                    <input type="text" class="form-control" placeholder="" aria-label="Username"
                           aria-describedby="basic-addon1" v-model="section"/>
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text">职位：</span>
                    <input type="text" class="form-control" placeholder="" aria-label="Username"
                           aria-describedby="basic-addon1" v-model="post"/>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">
                 关闭
                </button>
                <button type="button" class="btn btn-primary" @click="addBtn" data-dismiss="modal">保存</button>
            </div>
        </div>
    </div>
</div>




<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/2.2.1/mdb.min.css" rel="stylesheet"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/2.2.1/mdb.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/mdb.min.css">-->
<!-- Font Awesome
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/mdb.min.js"></script>-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/admin.js"></script>
</body>

</html>